<template>
<div v-if="viewLoading" class="ivu-card ivu-card-bordered ivu-card-dis-hover">
  <div class="ivu-card-head"><p>{{ $route.meta.title }}</p></div>

  <div class="ivu-card-body">
    <iForm ref="formRef" :model="formFields" :rules="rules" :label-width="100">

      <FormItem prop="cellphone" label="手机号：">
        <Input v-model="formFields.cellphone" placeholder="手机号"/>
      </FormItem>

      <FormItem prop="account" label="账号：">
        <Input v-model="formFields.account" placeholder="账号"/>
      </FormItem>

      <FormItem prop="password" label="密码：">
        <Input v-model="formFields.password" type="password" placeholder="密码"/>
      </FormItem>

      <FormItem prop="safe_password" label="安全密码：">
        <Input v-model="formFields.safe_password" type="password" placeholder="安全密码"/>
      </FormItem>

      <FormItem prop="p_account" label="推荐人账号：">
        <Input v-model="formFields.p_account" @on-change="onChangeFindPAccount" placeholder="不输入为无推荐人"/>
        <div v-if="pAccount" class="ivu-form-item-error-tip" style="color: #495060;">推荐人：{{ pAccount }}</div>
      </FormItem>

      <FormItem prop="level" label="状态：">
        <i-select v-model="formFields.level">
          <i-option v-for="(v, k) in apiConfig['user_level']" :value="k.toString()" :key="k">{{ v }}</i-option>
        </i-select>
      </FormItem>

      <FormItem prop="status" label="状态：">
        <i-select v-model="formFields.status">
          <i-option v-for="(v, k) in apiConfig['user_status']" :value="k.toString()" :key="k">{{ v }}</i-option>
        </i-select>
      </FormItem>

      <FormItem>
        <Button type="primary" :loading="submitLoading" @click="onSubmit">{{ $route.meta.title }}</Button>
        <Button type="ghost" @click="$router.go(-1);">返回</Button>
      </FormItem>
    </iForm>
  </div>
</div>
</template>
<script>
import qs from 'qs';
import { Form, Input, Button, Select, Option, Message } from 'iview';
import ajaxiView from '@/utils/ajaxiView';
import apiConfig from '@/utils/apiConfig';
import auth from '@/utils/auth';

export default {
  components: {
    [Form.name]: Form,
    [Form.Item.name]: Form.Item,
    [Input.name]: Input,
    [Button.name]: Button,
    [Select.name]: Select,
    [Option.name]: Option
  },
  data() {
    return {
      token: auth.getToken(),
      apiConfig: {},
      viewLoading: false,
      submitLoading: false,
      pAccount: '',
      formFields: {
        level: '1',
        status: '0'
      },
      rules: {
        cellphone: [
          {type:'string', required: true, message: '请输入手机号!', trigger: 'blur'},
          {type:'string', min: 11, message: '请输入不少于11位的手机号!', trigger: 'blur'}
        ],
        account: [
          {type:'string', required: true, message: '请输入账号!', trigger: 'blur'},
          {type:'string', min: 6, message: '请输入不少于6位的账号!', trigger: 'blur'}
        ],
        password: [
          {type:'string', required: true, message: '请输入密码!', trigger: 'blur'},
          {type:'string', min: 6, message: '请输入不少于6位的密码!', trigger: 'blur'}
        ],
        safe_password: [
          {type:'string', required: true, message: '请输入安全密码!', trigger: 'blur'},
          {type:'string', min: 6, message: '请输入不少于6位的安全密码!', trigger: 'blur'}
        ],
        level: [
          {type:'string', required: true, message: '请输入选择等级!', trigger: 'blur'}
        ],
        status: [
          {type:'string', required: true, message: '请输入状态!', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    _initialize() {
      var _this = this;
      apiConfig.getItem().then(function(api_config) {
        _this.apiConfig = api_config;
        _this.getData();
      });
    },
    getData() {
      let _this = this;
      _this.viewLoading = true;
    },
    onChangeFindPAccount() {
      if(this.formFields.p_account == this.formFields.account) {
        Message.warning('推荐人账号不能等于注册账号');
        return false;
      }

      if(this.formFields.p_account.replace(/[\u0391-\uFFE5]/g, 'aa').length < 6) {
        return false;
      }

      var _this = this;
      if(this.formFields.p_account !== null && this.formFields.p_account !== undefined && this.formFields.p_account !== '') {
        ajaxiView.get('/user/account/'+this.formFields.p_account+'?token='+this.token).then((data) => {
          if(data !== false) {
            _this.pAccount = data.user.account;
          }
        });
      }
    },
    onSubmit() {
      var _this = this;
      _this.$refs.formRef.validate((valid) => {
        _this.submitLoading = true;
        if(valid) {
          ajaxiView.post('/user', qs.stringify(_this.formFields)).then(function(data) {
            if(data !== false) {
              Message.success({
                content: data.msg,
                onClose: function() {
                  _this.$router.push({ name: 'userIndex' });
                }
              });
            }

            _this.submitLoading = false;
          });
        } else {
          _this.submitLoading = false;
        }
      });
    }
  },
  mounted() {
    this._initialize();
  }
}
</script>
